<template>
    <div class="post-list">
        <div class="post-item" v-for="post in posts" :key="post.id">
            <div class="user-Info">
                <div class="user-img">
                    <img :src="post.userInfo.avatar" alt="">
                </div>
                <div class="post-username">
                    <p>{{ post.userInfo.username }}</p>
                </div>
            </div>
            <div class="post-header">
                <h4>{{ post.title }}</h4>
                <el-dropdown trigger="hover">
                    <span class="el-dropdown-link">
                        <el-icon>
                            <More />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="handleTopPost(post.id)">置顶</el-dropdown-item>
                            <el-dropdown-item @click="handleDeletePost(post.id)"
                                style="color: #ff4d4f;">删除</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
            <div class="post-content">
                <div class="post-html-content" v-html="post.content"></div>
            </div>

            <div class="post-meta">
                <span>发布时间：{{ post.createTime }}</span>
                <span>点赞：{{ post.likes }}</span>
            </div>
        </div>

        <!-- 在帖子列表最后添加提示 -->
        <div class="no-more-data" v-if="posts.length === 0">
            暂无更多数据
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'  // Add this import
import { More } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';
import service from '@/utils/request'
import { formatDate } from '@/utils/date'


const userInfo = ref({
    id: '',
})
// 模拟数据
const posts = ref([

])

const getPostDetail = async () => {
    const res = await service.get(`/posts/post/authorId=${userInfo.value.id}`)
    posts.value = res.data.map(post => ({
        ...post,
        createTime: formatDate(post.createTime) // 格式化时间
    }))
    console.log(res);

}

onMounted(() => {
    const storedUser = JSON.parse(localStorage.getItem('userInfo')) || {}
    userInfo.value = {
        id: storedUser.id,
    }

    getPostDetail()
})

</script>

<style lang="scss" scoped>
.post-list {
    .post-item {
        background: #fff;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
        transition: all 0.3s ease;
        border: 1px solid #eee;

        &:hover {

            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        }

        .user-Info {
            display: flex;
            align-items: center;
            margin-bottom: 16px;

            .user-img {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                overflow: hidden;
                margin-right: 12px;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }

            .post-username {
                font-weight: 500;
                color: #333;
            }
        }

        .post-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;

            h4 {
                margin: 0;
                font-size: 18px;
                color: #333;
                font-weight: 600;
            }

            .el-dropdown-link {
                cursor: pointer;
                padding: 6px;
                border-radius: 50%;
                transition: background-color 0.3s;
                outline: none; // 添加这行代码移除黑色边框

                &:hover {
                    background-color: #f5f5f5;
                }
            }
        }

        .post-content {

            .post-html-content {
                :deep(.custom-image-wrapper) {
                    display: flex;
                    justify-content: center; // 水平居中
                    align-items: center; // 垂直居中 

                    img {
                        max-width: 100%; // 确保图片不会超出容器
                        max-height: 400px; // 限制最大高度
                        object-fit: cover; // 保持图片比例 
                    }
                }
            }

            p {
                margin: 0 0 16px;
                font-size: 14px;
                line-height: 1.6;
                color: #666;
            }
        }

        .post-meta {
            display: flex;
            align-items: center;
            font-size: 12px;
            color: #999;
            padding-top: 12px;
            border-top: 1px solid #eee;

            span {
                margin-right: 16px;
                display: flex;
                align-items: center;

                &::before {
                    content: '';
                    display: inline-block;
                    width: 4px;
                    height: 4px;
                    background-color: #ddd;
                    border-radius: 50%;
                    margin-right: 8px;
                }
            }
        }
    }
}

.no-more-data {
    text-align: center;
    color: #999;
    font-size: 14px;
    padding: 20px 0;
}
</style>